<template>
	<view class="uiwu-grad" :style="{'padding':padding}">
		<view v-for="(item, index) in grad" :key="index" class="uiwu-grad-item" :style="{ width: `${100 / linenum}%`}" @tap.stop="openWindow(item, index)">
			<view :style="{ width: imgWidth ,height:imgWidth}">
				<image mode="widthFix" :style="{ width: imgWidth,...itemStyle }" :src="item[gradName.image]" />
			</view>
			<text :style="textStyle">{{ item[gradName.name] }}</text>
		</view>
	</view>
</template>
<script>
/**
 * uiwu-grad 九宫格
 * @property {Array} grad 九宫格数据列表 [{name:'首页',image:'图片地址',url:'跳转的url',is_href:false}]  is_href是否是外链 默认不是
 * @property {Object} gradName  自定义grad数据列表字段 {name:'',image:'',url:'',is_href:false}
 * @property {String} padding 最外层的padding值默认0
 * @property {Sting} imgWidth 图片的宽度 默认 88rpx 需要传递单位值
 * @property {Object} textStyle 文字样式通 vue标准样式
 * @property {Number} linenum 一行展示几个元素
 * @event {Function} change  item块级元素点击事件
 */
export default {
	name: 'UiwuGrad',
	props: {
		grad: {
			default: () => {
				return [];
			},
			type: Array
		},
		gradName: {
			default: () => {
				return {
					name: 'name', // 九宫格text名称
					image: 'image', // 九宫格 图片
					url: 'url', // 需要跳转的url
					is_href: false // 是否是外链 默认不是
				};
			},
			type: Object
		},
		padding: {
			default: '0',
			type: String
		},
		imgWidth: {
			default: '88rpx',
			type: String
		},
		textStyle: {
			default: () => {
				return {
					'font-size': '28rpx',
					'color': '#333',
					'margin-top': '5rpx'
				};
			},
			type: Object
		},
		itemStyle:{
			default:()=>{
				return {}
			},
			type:Object
		},
		linenum: {
			default: 4,
			type: Number
		}
	},
	methods: {
		openWindow(item, index) {
			if(item.switch_tab){
				this.uiwu.openWindow(item[this.gradName.url],item[this.gradName.is_href] ? 'h5' : 'allclose')
				return
			}
			this.uiwu.openWindow(item[this.gradName.url],item[this.gradName.is_href] ? 'h5' : 'open')
			this.$emit('change', { item, index });
		}
	}
};
</script>
<style lang="scss">
image {
	width: 0;
}
.uiwu-grad {
	display: flex;
	flex-wrap: wrap;
	&-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15rpx 0;
	}
}
</style>
